<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>收藏</title>
    <!--此处导入本项目使用的高德地图的安全密钥，必须放在JSAPI之前，不然不能起作用-->
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'28d11c7a979a5cdd739a5b320da65c5d',
        }
    </script>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
</head>
<body>
<div id="head" th:include="common/header"></div>
<div style="width: 1290px;margin-left: auto;margin-right: auto">
    <span class="layui-breadcrumb" style="margin: 34px">
        <a href="/index/view">首页</a>
        <a><cite>收藏</cite></a>
    </span>
    <h1 style="margin-left: 5%;margin-top: 30px;margin-bottom: 20px">我的收藏</h1>
    <span id="SSpotLoadsGH">
        <i class="layui-icon layui-icon-find-fill" title="点击规划景点路线" style="font-size: 50px;position: fixed;right: 10px;top:700px;color: #00C0F7">

        </i>
    </span>
    <span th:if="${collectSSpot != null}">
        <div class="layui-row layui-col-space22">
            <span th:each="collectlist:${collectSSpot}">
                <div class="layui-col-md5" style="margin: 10px;width: 45.5%">
                    <a th:href="@{/index/toSSpotDeatil(sspotname=${collectlist.getSspotname()})}" title="进入详情">
                        <div class="layui-panel" style="padding: 20px">
                            <img th:src="${collectlist.getPicture()}">
                            <div style="position: absolute;margin-left: 250px;margin-top: -150px">
                                <h1 th:text="${collectlist.getSspotname()}"></h1>
                                <p style="position: absolute;margin-top: 80px;margin-left: 150px">归属城市：</p>
                                <p th:text="${collectlist.getCityname()}" style="margin-top: 80px;margin-left: 220px"></p>
                            </div>
                        </div>
                    </a>
                </div>
            </span>
        </div>
    </span>
    <span th:if="${collectSSpot.isEmpty()}">
        <p style="margin: 50px">当前暂无收藏景点，点击上方景区按钮去看看吧</p>
    </span>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="loadsGH" style="display: none">
        <table class="layui-table" lay-skin="line" style="width: 820px">
            <thead>
                <tr>
                  <th style="text-align:center;width: 100px">景区名</th>
                  <th style="text-align:center;width: 100px">地址</th>
                  <th style="text-align:center;width: 30px">经度</th>
                  <th style="text-align:center;width: 30px">纬度</th>
                  <th style="text-align:center;width: 50px">操作</th>
                </tr>
            </thead>
            <tbody>
            <span th:each="coll : ${collectSSpot}">
                <tr>
                  <td style="width: 80px" class="CollSSpot" th:text="${coll.getSspotname()}"></td>
                  <td style="width: 80px" th:text="${coll.getAddress()}"></td>
                  <td style="width: 30px" th:text="${coll.getLocationX()}"></td>
                  <td style="width: 30px" th:text="${coll.getLocationY()}"></td>
                  <td style="width: 80px">
                      <button class="layui-btn layui-btn-xs btnToAddRoads">加入</button>
                      <button class="layui-btn layui-btn-xs subToRoads">移除</button>
                  </td>
                </tr>
            </span>
            </tbody>
        </table>
<!--        <button type="button" th:text="${coll.getSspotname()}" class="layui-btn layui-btn-fluid"></button>-->
    <span id="mapOfGH" style="width: 600px;height: 580px;position: fixed;right: 3%;bottom: 12%"></span>
</div>
<!--<span id="foot" th:include="common/footer"></span>-->
<script type="text/javascript">
    var path=[];
    var map,route,marker;
    map = new AMap.Map('mapOfGH', {
        zoom: 13,
        resizeEnable: true
    });
    window.onload = function (){
        gaodeMap()
    }
    function gaodeMap(){
        //获取当前定位使用的配置选项
        var options = {
            'showButton': true,//是否显示定位按钮
            'position': 'LB',//定位按钮的位置
            /* LT LB RT RB */
            'GeoLocationFirst':true,
            'offset': [10, 20],//定位按钮距离对应角落的距离
            'showMarker': true,//是否显示定位点
            'markerOptions':{//自定义定位点样式，同Marker的Options
                'offset': new AMap.Pixel(-18, -36),
                'content':'<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
            },
            'showCircle': false,//是否显示定位精度圈
            'circleOptions': {//定位精度圈的样式
                'strokeColor': '#0093FF',
                'noSelect': true,
                'strokeOpacity': 0.5,
                'strokeWeight': 1,
                'fillColor': '#02B0FF',
                'fillOpacity': 0.25
            }
        }
        //获取当前定位的实际使用方法
        AMap.plugin("AMap.Geolocation", function() {
            //配置选项导入到geolocation对象中
            var geolocation = new AMap.Geolocation(options);
            map.addControl(geolocation);
            geolocation.getCurrentPosition(function(status,result){
                if(status == 'complete'){
                    path.push([result.position.lng,result.position.lat]);
                }})
        });
    }
    $('.btnToAddRoads').click(function (){
        var tr = $(this).closest("tr")
        var X = tr.find("td:eq(2)").text()
        var Y = tr.find("td:eq(3)").text()
        path.push(new AMap.LngLat(JSON.parse(X),JSON.parse(Y)))
        map.plugin("AMap.DragRoute", function() {
            route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_TIME); //构造拖拽导航类
            route.search(); //查询导航路径并开启拖拽导航
        });
    });
    $('.subToRoads').click(function (){
        var tr = $(this).closest("tr")
        var X = Math.floor(parseFloat(tr.find("td:eq(2)").text())*10000)/10000
        var Y = Math.floor(parseFloat(tr.find("td:eq(3)").text())*10000)/10000
        for(var i=1;i<path.length;i++){
            var numberX = Math.floor(path[i].lng*10000)/10000
            var numberY = Math.floor(path[i].lat*10000)/10000
            console.log(X,Y)
            console.log(numberX,numberY)
            if(numberX === X && numberY === Y){
                path.splice(i,1)
                path1 = path
                // console.log("移除元素后的path:",path)
                //使用map.clearMap()方法清理地图，不然会造成之前显示ide路径留下，影响规划新的路线
                map.clearMap()
                map.plugin("AMap.DragRoute", function() {
                    route = new AMap.DragRoute(map, path1, AMap.DrivingPolicy.LEAST_TIME); //构造拖拽导航类
                    route.search(); //查询导航路径并开启拖拽导航
                });
            }
        }
    });
    layui.use(['layer'],function (){
        var layer = layui.layer;
        var $ = layui.$;

    //    弹出层，景点路线规划
        $("#SSpotLoadsGH").click(function (){
            layer.open({
                type:1,
                title:"旅游景区路线规划&nbsp(规划路线仅供参考，非最佳路线)",
                area:["98%","90%"],
                content:$('.loadsGH'),
                btn:['保存','取消'],
                maxmin: true,
                success:function (index){
                    layer.msg("请注意连接手机热点进行定位较为精准，定位内容仅供参考！")
                },
                yes:function (index){
                    console.log("点击保存按钮并调用成功！"),
                    layer.close(index)
                }
            })
        })
    })
</script>
</body>
</html>